<template>
	<view class="container" v-if="postDetail.length">
		
		<!-- 打卡详情 -->
		<card :postsRecord="postDetail" :isshowcomment="isshowcomment" :currentPid='pid'></card>
		
		<!-- 遮罩区 -->
		<view v-if="isShowMask" class="mask-f">
			<view class="mask" @click="clickCancle()"></view>
		</view>
		<!-- 遮罩区 -->
		
		
		<!-- 评论列表 -->
		<view class="content-ques">
			
			<!-- 排序方式 -->
			<view class="rank">
				<!--下拉选择框 dropdownlist-->
				<view class="">全部回复</view>
				<view class="tui-drop-input-box">
					<tui-dropdown-list :show="dropdownShow" :top="86" :height="0">
						<template v-slot:selectionbox>
							<view  shape="circle" @click="dropDownList('',-1)">{{rankType.name}}
								<view class="tui-animation" :class="[dropdownShow?'tui-animation-show':'']">
									<tui-icon name="turningdown" :size="20"></tui-icon>
								</view>
							</view>
						</template>
						<template v-slot:dropdownbox>
							<view class="tui-selected-list">
								<scroll-view scroll-y class="tui-dropdown-scroll">
									<block class="rank-item" v-for="(item,index) in dropdownlistData" :key="index">
										<tui-list-cell padding="0" @tap.stop="dropDownList(item,index)" :unlined="dropdownlistData.length-1==index">
											<view class="tui-cell-class">
												<!-- <tui-icon :name="item.icon" :size="item.size" :color="item.color"></tui-icon> -->
												<text class="tui-ml-20">{{item.name}}</text>
											</view>
										</tui-list-cell>
									</block>
								</scroll-view>
							</view>
						</template>
					</tui-dropdown-list>
				</view>
				<!--下拉选择框-->
			</view>
			<!-- 排序方式 -->
			
			<view class="view-conmment-note" v-if="commentList.err == 1">
				<image
					src=""
					class="icon-none"
					mode="aspectFit"
				></image>
				<text class="text-conmment-note">暂无评论</text>
			</view>
			
			<!-- 评论列表信息 -->
			<view class="view-content-comment" v-if="commentList.length > 0">
				<view class="comment-item" v-for="(item,index) in commentList" :key="index">
					<view class="top">
						<view class="user-avatar" @tap.stop="gouserhp(item.user.id)">
							<image :src="item.user.avatar" mode="aspectFill"></image>
						</view>
						
						<view class="center">
							<view class="user-name">	
								{{item.user.name}}
							</view>
							<view class="date">
								{{item.time}}
							</view>
						</view>
					</view>
					
					<!-- 评论内容 -->
					<view class="comment">
						<view class="father">
							{{item.body}}
						</view>
						<view class="quote" v-if="item.quote" >
							<view class="q-content">
								<text class="q-name">{{item.quote.user_name}}:</text>
								<text class="q-body">{{item.quote.body}}</text>
							</view>
						</view>
					</view>
					
					<!-- 点赞与评论 -->
					<view class="bottom">
						<view class="like"  @tap="toggleLikeComment(item)">
							<text :class="[item.userliked?'cuIcon-appreciatefill':'cuIcon-appreciate']"></text>
							<text  class="margin-left-xs">{{item.liked}}</text>
						</view>
						<view class="gocomment" v-if="item.commented" @tap="gocommentdetail(item.id)">
							<!-- <text class="cuIcon-message margin-left-sm"></text> -->
							<image src="/static/images/post/comment.svg" mode=""></image>
							<text class="margin-left-xs">{{item.commented}}</text>
						</view>
						<view class="reply">
							<!-- <image src="/static/images/post/reply.svg" mode=""></image> -->
							<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="child-reply" v-if="!phone">
								<image src="/static/images/icon/child_reply.png" mode=""></image>
								<text>回复</text>
							</button>
							<button class="child-reply"  @tap.stop="gocomment(item.id)" v-else>
								<image src="/static/images/icon/child_reply.png" mode=""></image>
								<text>回复</text>
							</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 评论列表信息 -->
			
			<!-- 评论区 -->
			<view class="view-conmment-send-bottom"> 
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" withCredentials="true" class="view-comment-textarea" v-if="!phone"><view class="textarea-comment">发表评论…</view></button>
				<view class=" view-comment-textarea " style="padding: 20rpx 26rpx;" v-else @click="clickComment()">
					<view class="textarea-comment " >发表评论…</view>
				</view>
			</view>
			<five-comment ref="detailComment" @sendComment="sendComment" ></five-comment>
		<!-- 评论区 -->
		</view>
		<!-- 评论列表 -->
		
	</view>
</template>

<script>
	import Vue from 'vue'
	import {mapState} from 'vuex';
	import api from '../../../common/api.js'
	import data from '@/data';
	import dateUtils from '@/common/utils/dateUtils.js';
	
	import fiveCommentList from '../../../components/five-comment/five-comment.vue'
	import card from '../../../components/common/card.vue'
	import tuiIcon from '../../../components/tui-icon/tui-icon.vue'
	
	export default {
		
		components: {
			tuiIcon,
			fiveCommentList,
			card,
		},
		
		data() {
			return {
				use_video:this.use_video,
				use_audio:this.use_audio,
				use_share:this.use_share,
				postDetail:[],
				pid:'',					//打卡id
				detailInfo: {},
				commentList: [],
				page:1,					//评论页数
				limit:15,				//评论条数限制
				isshowcomment:0,//card组件是否展示评论数据
				replay_content:'',
				replay_id:'',
				//评论组件相关
				placeholder: '请输入评论内容…',
				commentParam: {},
				me:'',					//用户个人信息
				isShowMask:false,
				rankType:{name:'最新回复 ',type:'id'}, //当前排序方式
				proDropData: [],
				proDropIndex: -1,
				dropdownShow: false,
				dropShow: false,
				dropdownlistData: [{
					name: "最新回复",
					type:'id'
				}, {
					name: "热门回复",
					type:'rank'
				}],
				dropdownShow: false,
				
				// 分享相关字段
				share_title:'',			//分享标题
				share_cover:'',			//分享封面
				share_path:''				//分享路径
			}
		},
		
		onHide() {
			uni.$off('updateComment')
			console.log('updateComment');
		},
		
		async updated() {
			uni.$off('updateHotPost')
			uni.$on('updateHotPost',(index,item) => {//点赞，更新热门打卡
				if(item.userliked){
					console.log('点赞');
				  item.liked --
				  item.userliked = false
					item.likers.splice(item.likers.indexOf(item.likers.find(el => { return el.id == this.me.id} )),1)
				  let res =  api.UnLikePost(item.id)
					this.postDetail[0] = item
				}else{
					console.log('点赞',item);
				  item.liked ++
				  item.userliked = true
				  let res  =  api.LikePost(item.id)
					item.likers.push(this.me)
					this.postDetail[0] = item
				}
			})
			
			var _that = this
			uni.$off('updateComment')
			uni.$once('updateComment',async function() {//更新评论
				console.log('更新详情页评论');
				_that.commentList =  await _that.getComment(0,_that.limit,_that.pid,_that.rankType.type)
				let res = await api.GetPostsDetail(_that.pid) //获取打卡详情
				_that.postDetail[0] = res
			})
			
		},
		
		async onLoad(p) {
			this.pid = p.pid
			this.getMe()
		},
		
		async onShow() {
			let res = await api.GetPostsDetail(this.pid) //获取打卡详情
			this.postDetail[0] = res
			this.share_title = res.share_title
			this.share_cover = res.share_cover
			this.share_path = res.share_path
			if(	this.postDetail[0].catetype == "分享打卡") {
				if(	this.postDetail[0].Share_type == "Poem") {
						var pdetail = await api.GetPoemDetail(this.postDetail[0].Share_id)
						this.$set(this.postDetail[0],'detail',pdetail)
					}else if(	this.postDetail[0].Share_type == "Novel") {
						var ndetail = await api.GetNovelDetail(this.postDetail[0].Share_id)
						this.$set(this.postDetail[0],'detail',ndetail)
					}else {
						var adetail = await api.GetArticleDetail(this.postDetail[0].Share_id)
						this.$set(this.postDetail[0],'detail',adetail)
					}
			}
			this.commentList = await this.getComment(this.page,this.limit,this.pid,this.rankType.type); //获取评论列表
		},
		
		computed: {//获取手机号
			...mapState(['currAudioId','phone'])
		},
		
		methods:{
			
			async getMe() {// 获取当前登录用户信息
				let res = await api.GetMe()
				this.me = res[0]
			},
			
			async getPhoneNumber (e) {//手机号授权
			　　if(e.detail.errMsg=="getPhoneNumber:ok"){
			      let res = await api.GetUserPhone(e.detail.encryptedData,e.detail.iv)
						let sres = await api.SetUserPhone(res.purePhoneNumber)
						if(sres.err == 0) {
							this.$store.commit('setPhone',res.purePhoneNumber)
							uni.showToast({
								title:sres.msg,
								duration:800
							})
						}
				}else{
			        console.log('用户点击了拒绝') ;   
			    }
			},
			
			/**
			 * 回复打卡 or 对评论进行回复
			 */
			clickComment() {//弹出评论框
				this.replay_id = 0
				this.$refs.detailComment.open();
			},
			
			gocomment(id) {// 弹出评论框
			console.log('item==============',id);
				if(!id) {//回复打卡
					this.replay_id = 0
				}else {//回复评论
					this.replay_id = id
				}
				
				this.$refs.detailComment.open();
				uni.hideTabBar({})
			},
			
			async sendComment(result) {//发送评论
				this.replay_content = result
				console.log(this.replay_content);
				if(!this.replay_content.trim()) {
					uni.showToast({
						title:'评论内容不能为空',
						icon:'none',
						duration:700
					})
					return false
				}
				let res = await api.AddUserComment(this.pid,this.replay_id,this.replay_content)
				this.commentList = await this.getComment(0,this.limit, this.pid,this.rankType.type);
				let pres = await api.GetPostsDetail(this.pid) //获取最新打卡详情
				console.log(pres);
				this.postDetail[0] = pres
				uni.showTabBar({
					
				})
			},
			
			async getComment(page,limit,pid,type) {//获取评论详情
				return await api.GetPostComment(page,limit,pid,type)
			},
			
			toggleLikeComment (item){//切换用户点赞评论
				if(item.userliked){
				  item.userliked = false
				  item.liked --
				  api.UnLikeComment(item.id)
				}else{
				  item.userliked = true
				  item.liked ++
				  api.LikeComment(item.id)
				}
			},
			
			gouserhp(uid) {//跳转到用户主页
				
				uni.navigateTo({
					url:'/pages/user/comps/my?id='+uid
				})
			},
			
			gocommentdetail(cid) {//跳转到评论回复页面
				uni.navigateTo({
					url:'/pages/post/comps/commentdetail?qid='+cid+ '&pid=' + this.pid
				})
			},
			
			async dropDownList(item,index) {//选择评论排序方式
				this.isShowMask = true
				if (index != -1) {
					this.rankType = item
					this.isShowMask = false
					this.commentList = await this.getComment(this.page,this.limit, this.pid,this.rankType.type);
				}
				this.dropdownShow = !this.dropdownShow
				// this.isShowMask = false
			},
			
			clickCancle() {//取消遮罩效果,隐藏rank列表
				this.isShowMask = false;
				this.dropdownShow = !this.dropdownShow
			},
			
			async toggleLikePost(item) {//切换点赞状态
				if(item.userliked){
				  item.liked --
				  item.userliked = false
				  let res = await api.UnLikePost(item.id)
				}else{
				  item.liked ++
				  item.userliked = true
				  let res  = await api.LikePost(item.id)
				}
			},
			
			preview(image,images){//预览图片
				uni.previewImage({
					current:image,
					urls:images
				})
			},
			
			goShareDetail(item) {//跳转到对应的分享类别详情页
				var url = ''
				if(item.Share_type == "Poem") {
					url = '/pages/post/comps/poemdetail?pid='+item.detail.id
				}else if(item.Share_type == "Novel"){
					url = '/pages/post/comps/noveldetail?nid='+ item.detail.id
				}else {
					url = '/pages/post/comps/articledetail?id=' + item.detail.id
				}
				uni.navigateTo({
					url:url
				})
			},
			
			goCir(cid) {//跳转到对应打卡圈子
				uni.navigateTo({
					url:'/pages/circle/comps/Detail?id='+cid
				})
			},
			
			gouserhp(uid) {//跳转到用户主页
				uni.navigateTo({
					url:'/pages/user/comps/my?id='+uid
				})
			},
		},
		
		onShareAppMessage: function(res) {//点击右上角分享小程序
			return {
				title:this.share_title,
				path: this.share_path,
				imageUrl: this.share_cover,
			}
		},
		
		async onPullDownRefresh() {//下拉刷新
			let res = await api.GetPostsDetail(this.pid) //获取打卡详情
			this.postDetail[0] = res
			this.page = 1
		  this.commentList = await this.getComment(this.page,this.limit, this.pid,this.rankType.type);
			setTimeout(() => {
				uni.stopPullDownRefresh()
			},500)
		},
		
		async onReachBottom() {
			let list = await api.GetPostComment(this.page+1,this.limit,this.pid,this.rankType.type)
			if(list && list.length>0){
				this.page ++
				this.commentList.push(...list)
			}else{
				uni.showToast({ title:'没有更多了', icon: "none" ,duration:800});
			}
		},
	}
</script>

<style lang="scss">
	@import '../../../common/css/iconfont.css';
	
.view-content-comment {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 85rpx;
	background-color: white;
	// margin-top: 20rpx;
	padding: 30rpx;
	.title {
		width: 100%;
		color: #333;
		font-weight: bold;
		font-size: 34rpx;
	}
	.comment-item {
		display: flex;
		flex-direction: column;
		flex: 1;
		width: 100%;
		padding: 15rpx 20rpx 2rpx;
		border-bottom: 2rpx solid #F3F6F5;
		word-break: break-all;
		.top {
			display: flex;
			align-items: center;
			// justify-content: space-evenly;
			.user-avatar {
				width: 80rpx;
				height: 80rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
			.center {
				width: 500rpx;
				height: 80rpx;
				margin-left: 20rpx;
				font-size: 32rpx;
				.user-name {
					font-size: 32rpx;
					font-weight: bold;
					color: #576A94;
				}
				.date {
					padding-bottom: 8rpx;
					color: #CCCCCC;
					font-size: 28rpx;
				}
			}
			.right {
				display: flex;
				align-items: center;
				justify-content: space-between;
				width: 75rpx;
				font-size: 34rpx;
				.liked {
					font-size: 26rpx;
				}
			}
		}
		
		.comment {
			margin-left: 100rpx;
			font-size: 32rpx;
			.father {
				padding: 10rpx;
			}
			.quote {
				width: 520rpx;
				background-color: rgba($color: #e3e3e3, $alpha: 0.5);
				border-radius: 10rpx;
				.q-content {
					// display: flex;
					// align-items: center;
					// line-height: 60rpx;
					padding: 6rpx 18rpx;
					color: #576A94;
					font-size: 32rpx;
					.q-name {
						font-weight: 700;
						width: 150rpx;
					}
					.q-body {
						margin-left: 10rpx;
						padding: 10rpx 0;
						color: #000000;
					}
					
				}
			}
		}
		
		.bottom {
			display: flex;
			align-items: center;
			justify-content:flex-start;
			width: 600rpx;
			height: 50rpx;	
			margin: 10rpx 0 10rpx 100rpx;
			font-size: 32rpx;
			color: #4D6088;
			.reply {
				display: flex;
				align-items: center;
				image {
					margin-right: 6rpx;
					width: 40rpx;
					height: 40rpx;
				}
				button {
					padding: 0;
					margin: 0;
					background: transparent;
					display: flex;
					align-items: center;
					font-size: 32rpx;
				}
			}
		}
		.like,.gocomment, {
			display: flex;
			align-items: center;
			// justify-content: space-between;
			width: 200rpx;
			image {
				margin-right: 6rpx;
				width: 54rpx;
				height: 40rpx;


			}
		}
		
	}
}

.content-ques {
	// background-color: $view-bg-color;
	border-top: 20rpx  solid #F3F6F5;
	.rank {
		display: flex;
		position: relative;
		justify-content: space-between;
		padding: 10rpx  25rpx;
		font-size: 32rpx;
		color: #9a9a9a;
		.tui-drop-input-box {
			color: #4d4d4d;
		}
	}
}
.mask-f {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	.mask {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
	}
}

.tui-scroll-box {
	width: 200rpx;
	height: 480rpx;
	box-sizing: border-box;
	position: relative;
	z-index: 99;
	color: #fff;
	font-size: 30rpx;
	word-break: break-all;
}
.tui-animation {
	display: inline-block;
	transform: rotate(0deg);
	transition: all 0.2s;
}

.tui-animation-show {
	transform: rotate(180deg);
}
.tui-selected-list {
	background-color: #fff;
	border-radius: 10rpx;
	// overflow: hidden;
	// z-index: 999;
	transform: translateZ(0);
}
.tui-selected-list:before {
	content: " ";
	font-size: 0;
	line-height: 0;
	margin: 0 auto;/*居中*/
	display: block;/*独占一行*/
	// box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /*配合整体一样的投影*/
	// background-color: #ff0000;
	width: 10px;
	// height: 10px;
	-webkit-transform: rotate(45deg); 
	transform: rotate(45deg); /*一个正方形倾斜四十五度就是三角了但是要把下半部分藏起来*/
	position: relative;
	top: -5px;  /* //果断的露出上半部分 */
	z-index: 990; /*果断的隐藏下半部分*/
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
}
.tui-dropdown-scroll {
	// height: 400rpx;
	.rank-item {
		// padding: 15rpx 15rpx;
	}
}
.tui-cell-class {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10rpx 15rpx;
	// border-top: 1rpx solid #e7e7e7;
}
.tui-cell-class:nth-last-child(1) {
	border-bottom: 1rpx solid #e7e7e7;
}

.tui-ml-20 {
	// margin-left: 20rpx;
	// padding: 15rpx 15rpx;
}
.view-conmment-note {
	display: flex;
	// height: 60vh;
	// position: fixed;
	// bottom: 260rpx;
	margin-top: 100rpx;
	// margin: auto;
	width: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 1;
	padding-bottom: 150rpx;
}
.icon-none {
	width: 225rpx;
	height: 225rpx;
	color: #bbbbbb;
}
.text-conmment-note {
	color: #808080;
	font-size: 32rpx;
	margin-top: 30rpx;
}
.view-delete-detail {
	flex: 1;
	display: flex;
	font-size: 26rpx;
}
.bottom-item {
	flex: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 80rpx;
	.bottom-item-image {
		font-size: 40rpx;
		color: $uni-text-color;
	}
	.bottom-item-text {
		font-size: $uni-font-size-sm;
		margin-left: 20rpx;
		color: $uni-text-color;
	}
}
.view-content-content {
	background-color: white;
	flex-direction: column;
	padding: 30rpx 30rpx 0 30rpx;
}
.view-header {
	display: flex;
	align-items: center;
	flex-direction: row;

	.image-photo {
		height: 90rpx;
		width: 90rpx;
		background-color: $view-bg-color;
		border: 1px solid $line-color;
		border-radius: 45rpx;
		margin-right: 30rpx;
	}

	.header-txt {
		display: flex;
		flex-direction: column;
		color: $uni-text-color-grey;
		line-height: 1.5;
		justify-content: center;
		font-size: $uni-font-size-sm;
		.name {
			color: #004261;
			font-weight: bold;
			font-size: $uni-font-size-base;
		}
	}
}
.sub {
	color: $uni-text-color-grey;
	font-size: $uni-font-size-sm;
}
.item-desc {
	color: $uni-text-color;
	line-height: 1.6;
	font-size: $uni-font-size-base;
	margin-top: 20rpx;
}

.item-imgs {
	margin: 20rpx 0;
	display: flex;
	flex-direction: row;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;

	.image-imgs {
		border-radius: 10rpx;
		background-color: $view-bg-color;
		height: 220rpx;
		width: 220rpx;
		margin: 1px 4rpx;
	}
}

.view-conmment-send-bottom {
	width: 100%;
	// height: 85rpx;
	position: fixed;
	bottom: 0;
	display: flex;
	flex-direction: row;
	background-color: white;
	border-top: 1px solid $view-bg-color;
}

.view-comment-textarea {
	background-color: $uni-bg-color-grey;
	border-radius: 40rpx;
	// padding: 15rpx 20rpx;
	text-align: unset;
	margin: 25rpx 20rpx;
	width: 80%;
	flex: 1;
	align-items: center;
}
.textarea-comment {
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: $uni-font-size-base;
	// color: $uni-text-color;
	color: $uni-text-sub-color;
}
.icon-comment {
	font-size: 46rpx;
	color: $uni-text-color;
	margin: 0 30rpx 0 5rpx;
}
.view-btn-comment {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: $uni-font-size-base;
	color: white;
	height: 70rpx;
	width: 120rpx;
	border-radius: 10rpx;
	background-color: $theme-color;
	font-weight: 500;
}
.textarea-bottom {
	background-color: white;
	padding: 20rpx;
}
page {
	background: #ffffff;
}
.tui-avatar {
	padding:  25rpx 20rpx;
	display: flex;
	image {
		height:80rpx;
		width: 80rpx;
		border-radius: 10rpx;
		border: 1rpx solid #F3F6F5;
	}
	.user-info {
		width: 600rpx;
		box-sizing: content-box;
		margin-left: 10rpx;
		.time {
			display: flex;
			// justify-content: space-between;
			align-items: center;
			letter-spacing: 1px;
			padding: 0 0 8rpx;
			font-size: 28rpx;
			color: #9a9a9a;
		}
		.user-name {
			color: #4D6088;
			font-weight: 600;
		}
		.user-desc {
			font-size: 32rpx;
		}
	}
}
.child-reply {
	// width: 38rpx;
	// border: none;
	// display: block;
	// height: 50rpx;
	// margin: 0;
	// background-color: #fff;
	// background-size: 100% 100%;
	// background-position: 50% 50%;
	// background-repeat: no-repeat;
	// background-image: url('/static/images/icon/child_reply.png');
	image{
		width: 54rpx;
		height: 38rpx;
	}
}
.replyed {
	width: 38rpx;
	height: 32rpx;
	margin: 0;
	background-size: 75% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: #fff;
	background-image: url('/static/images/icon/replyed.png');
}
.unreply {
	width: 38rpx;
	height: 32rpx;
	margin: 0;
	background-size: 75% 100%;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-color: #fff;
	background-image: url('/static/images/icon/unreply.png');
}
.icon {
	display: flex;
	height: 60rpx;
	width: 570rpx;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	margin-left: 122rpx;
	.icon-view,.icon-liked,.icon-commented {
		display: flex;
		align-items: center;
		width: 180rpx;
		.mul-icon {
			width: 38rpx;
			height: 32rpx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		button {
			padding: 0;
			margin: 0;
			background: transparent;
			display: flex;
			align-items: center;
			font-size: 32rpx;
			color: #4D6088;
		}
		image {
			width: 38rpx;
			height: 32rpx;
			margin-left: 20rpx;
		}
	}
	.icon-view {
		width: 256rpx;
		image {
			width: 40rpx;
			height: 32rpx;
		}
	}
	.icon-liked {
		display: flex;
		align-items: baseline;
		flex-direction: row-reverse;
	}
	text {
		margin-left: 10rpx;
	}
}

.comment-desc {
	// margin-left: 80rpx;
	margin-bottom: 20rpx;
	width: 590rpx;
	background-color: rgba($color: #e3e3e3, $alpha: 0.5);
	border-radius: 10rpx;
	.comment-item {
		line-height: 44rpx;
		padding: 6rpx 18rpx;
		color: #4D6088;
		font-size: 32rpx;
		
		text:nth-child(2) {
			color: #000000;
		}
	}
}
.container {
	// padding-bottom: env(safe-area-inset-bottom);
	// padding-bottom: 128rpx;
}

.tui-title {
	width: 100%;
	padding: 70rpx 30rpx 30rpx 30rpx;
	box-sizing: border-box;
	font-size: 30rpx;
	line-height: 30rpx;
	color: #666;
}
	
.tui-default {
	padding: 15rpx 30rpx 10rpx;
	padding-left: 120rpx;
	
	.belong {
		// display: flex;
		display: inline-block;
		align-items: center;
		height: 45rpx;
		font-size: 26rpx;
		line-height: 45rpx;
		padding: 0rpx 20rpx;
		border-radius: 20rpx;
		background-color: rgba($color: #e3e3e3, $alpha: 0.5);
		.cir {
			display: inline-block;
			zoom: 1;
		}
		image {
			width: 25rpx;
			height: 22rpx;
		}
	}
	
	
}

.tui-article {
	position: relative;
}

.tui-article-img {
	width: 100%;
	height: 300rpx;
	display: block;
}

.tui-article-title {
	position: absolute;
	left: 0;
	bottom: 0;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	box-sizing: border-box;
	padding: 20rpx 30rpx;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
}

.tui-cell-title {
	font-size: 32rpx;
	font-weight: 500;
	padding: 0 10rpx;
	word-break: break-all;
	word-wrap: break-word;
}

.tui-cell-img {
	height: 160rpx;
	width: 160rpx;
}

.tui-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-mr {
	margin-right: 20rpx;
}

.video-area {
	display: flex;
	flex-wrap: wrap;
	width: 750rpx;
	padding: 0 40rpx 0 108rpx;
	box-sizing: border-box;
	video {
		width: 400rpx;
		height: 440rpx;
	}
}
.up-works-area {
	display: flex;
	align-items: center;
	width: 700rpx;
	margin: 20rpx 0rpx 20rpx 120rpx;
	.works-area {
		display: flex;
		width: 550rpx;
		height: 120rpx;
		align-items: center;
		padding: 15rpx 20rpx;
		background-color: #F7F7F7;
		.w-cover {
			image {
				width: 130rpx;
				height: 110rpx;
				display: block;
			}
		}
		.w-body {
			display: flex;
			height: 120rpx;
			margin-left: 20rpx;
			flex-direction: column;
			font-size: 32rpx;
			justify-content: space-between;
			.w-intro {
				font-size: 28rpx;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden; 
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		}
	}
	.works-cancel {
		image {
			width: 65rpx;
			height: 65rpx;
			margin-left: 10rpx;
		}
	}
}
.pic {
	/* display: flex;
	display: -webkit-flex;
	background: #fff;
	padding: 0 40rpx 0 108rpx; */
	display: flex;
	flex-wrap: wrap;
	width: 750rpx;
	padding: 0 40rpx 0 108rpx;
	box-sizing: border-box;
	.pic-item {
		position: relative;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		// image {
		// 	width: 100%;
		// 	height: 100%;
		// }
	}
	.only-img {
		width: 420rpx;
		height: 300rpx;
		border-radius: 6rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.lot-img {
		width: 185rpx;
		height: 185rpx;
		display: block;
		border-radius: 6rpx;
	}
}

// .tui-flex-pic image {
// 	width: 185rpx;
// 	height: 190rpx;
// 	padding: .5% 1%;
	
// }

.tui-content {
	padding: 0rpx 30rpx 20rpx 100rpx;
	box-sizing: border-box;
	font-size: 34rpx;
	font-weight: 400;
	color: #333;
}

.tui-color-gray {
	color: #ccc;
}

.tui-pleft {
	padding-left: 100rpx;
}

</style>
